<!-- 待收货查看物流页面 -->
<template>
	<view class="tracking-page">
		<!-- 商品信息 -->
		<view class="tracking-goods">
			<view>
				<image :src="goods_image" mode="aspectFill"></image>
			</view>
			<view class="tracking-text">
				<text class="overflow">{{goods_title}}</text>
				<text>{{buy_amount}}件</text>
			</view>
		</view>

		<!-- 快递公司信息 -->
		<view class="courier-company">
			<image :src="logo" mode="aspectFill"></image>
			<text class="company-name">{{kuaidi}}</text>
			<text>{{waybill_No}}</text>
		</view>

		<!-- 步骤条 -->
		<view class="tracking-view" v-for="(item,index) in path" :key="index">
			<!-- 左边 -->
			<view class="tracking-left">
				<!-- 签收才会显示 -->
				<view v-if="index == 0 && state == '3'" class="active">签</view>
				<view v-else></view>  <!-- 步骤圆点 -->
				<view></view>
			</view>
			<!-- 右边 -->
			<view class="tracking-right">
				<view :class="[index == 0 && state == '3' ? 'active-text' : '']">{{item.context}}</view>
				<view>{{item.time}}</view>
			</view>
		</view>

		<!-- 没有物流轨迹 -->
		<view class="tips" v-if="status == 0">暂无物流动态</view>
	</view>
</template>

<script setup>
	import { ref, reactive, toRefs } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import md5 from "js-md5"

	const data = reactive({
		key: 'rfjRBNzx9842', // 快递100企业授权 key 
		customer: 'BD0D54354A4FD1BBFB53CBF7ABA3F388', // 授权码
		companyArr: [ // 各大快递公司
			{
				name: '圆通速递',
				code: 'yuantong',
				logo: 'https://qita-1252107261.cos.ap-chengdu.myqcloud.com/kuaidi/yuantong.jpg'
				},
			{
				name: '韵达快递',
				code: 'yunda',
				logo: 'https://qita-1252107261.cos.ap-chengdu.myqcloud.com/kuaidi/yunda.jpg'
				},
			{
				name: '中通快递',
				code: 'zhongtong',
				logo: 'https://qita-1252107261.cos.ap-chengdu.myqcloud.com/kuaidi/zhongtong.jpg'
				},
			{
				name: '邮政快递',
				code: 'youzhengguonei',
				logo: 'https://qita-1252107261.cos.ap-chengdu.myqcloud.com/kuaidi/youzheng.jpg'
				},
			{
				name: '申通快递',
				code: 'shentong',
				logo: 'https://qita-1252107261.cos.ap-chengdu.myqcloud.com/kuaidi/shentong.png'
				},
			{
				name: '顺丰速运',
				code: 'shunfeng',
				logo: 'https://qita-1252107261.cos.ap-chengdu.myqcloud.com/kuaidi/shunfeng.jpg'
				},
			{
				name: 'EMS',
				code: 'ems',
				logo: 'https://qita-1252107261.cos.ap-chengdu.myqcloud.com/kuaidi/ems.png'
				},
			{
				name: '京东物流',
				code: 'jd',
				logo: 'https://qita-1252107261.cos.ap-chengdu.myqcloud.com/kuaidi/jd.jpg'
				},
			{
				name: '极兔速递',
				code: 'jtexpress',
				logo: 'https://qita-1252107261.cos.ap-chengdu.myqcloud.com/kuaidi/jitu.png'
				},
			{
				name: '百世快递',
				code: 'huitongkuaidi',
				logo: 'https://qita-1252107261.cos.ap-chengdu.myqcloud.com/kuaidi/baishi.jpg'
				}
		],
		waybill_No: '', // 运单号
		goods_image: '', // 商品图片
		goods_title: '', // 商品标题
		buy_amount: 0, // 购买数量
		company: '', // 订单所属快递公司
		state: 0, // 快递单当前状态，默认为 0在途，1揽收，2疑难，3签收，4退签，5派件，8清关，14拒签等10个基础物流状态，
		logo: '', // 快递 logo
		path: [], // 该订单的所有物流路径
		status: 0 // 是否有物流状态，默认 0 没有
	})

	const { waybill_No, goods_image, goods_title, buy_amount,company,state,logo,path,status } = toRefs(data)

	onLoad((event) => {
		// console.log("event",event);
		let res = JSON.parse(event.data)
		data.waybill_No = res.waybill_No
		data.goods_image = res.goods_image
		data.goods_title = res.goods_title
		data.buy_amount = res.buy_amount
		getPath()
	})


	// 获取物流路径
	function getPath() {
		let param = {
			com: '',   // 快递公司编码，为空表示查询所有
			num: data.waybill_No,  // 运单号
		}
		//  sign：签名，按 param + key + customer 的顺序进行MD5加密（注意加密后字符串一定要转32位大写 
		let sign = md5(JSON.stringify(param) + data.key + data.customer).toUpperCase()
		uni.request({
				url: 'https://poll.kuaidi100.com/poll/query.do',
				method: 'post',
				header: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				data: {
					customer: data.customer,
					sign: sign,
					param: JSON.stringify(param)
				}
			})
			.then(res => {
				// console.log(res)
				if (res.data.message == "ok") {
					data.waybill_No = res.data.nu
					console.log("订单返回信息",res.data);
					data.state = res.data.state
					// 筛选出与快递
					const companyItem = data.companyArr.filter(item => {
						return item.code == res.data.com
					})
					// console.log("companyItem",companyItem);
					data.company = companyItem[0].name
					data.logo = companyItem[0].logo
					data.path = res.data.data
					data.status = 1
				}
			})
			.catch(err => {
				console.log(err)
			})
	}
</script>

<style scoped>
	.tracking-page {
		margin: 20rpx 20rpx 40rpx 20rpx;
	}

	.tracking-goods {
		display: flex;
		margin-bottom: 40rpx;
		border-bottom: 1rpx solid #f2f2f2;
		padding-bottom: 10rpx;
	}

	.tracking-goods image {
		display: block;
		width: 150rpx;
		height: 150rpx;
	}

	.tracking-goods view:nth-child(2) {
		flex: 1;
		padding-left: 20rpx;
	}

	.tracking-text text:nth-child(2) {
		font-size: 26rpx;
		color: #f42c37;
		padding-top: 20rpx;
	}

	.courier-company image {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		display: block;
	}

	.courier-company {
		display: flex;
		align-items: center;
		padding-bottom: 40rpx;
	}

	.company-name {
		padding: 0 30rpx 0 20rpx;
	}

	/* 步骤条 */
	.tracking-view {
		display: flex;
	}

	.tracking-left {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 40rpx;
	}
	
	.tracking-left view:nth-child(1) {
		background-color: #cccccc;
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
	}
	

	.tracking-left view:nth-child(2) {
		background-color: #cccccc;
		width: 4rpx;
		height: 100%;
	}

	.tracking-right {
		padding: 0 0 40rpx 20rpx;
		width: 100%;
	}

	.tracking-right view:nth-child(1) {
		line-height: 1.5;
		padding-bottom: 10rpx;
	}

	.tracking-right view:nth-child(2) {
		color: #c0c0c0;
		font-size: 26rpx;
	}

	.active {
		width: 35rpx !important;
		height: 35rpx !important;
		font-size: 22rpx;
		color: #FFFFFF;
		background-color: #f42c37 !important;
		text-align: center;
		line-height: 35rpx;
	}

	.active-text {
		color: #f42c37;
	}
</style>
